<template>
	<view class="ProductList bigestBox">
		<seach-bar :placeholder-text="searchItem"></seach-bar>
		<view class="title">
			共四个结果
		</view>
		<product-list-data :productData="producList"></product-list-data>
	</view>
</template>

<script>
	import seachBar from '../../components/common/seachBar.vue';
	import ProductListData from '../../components/ProductList/ProductListData.vue';
	import { request } from '@/utils/request';
	import { showToast } from '@/utils/promise';
	export default {
		data() {
			return {
				searchItem: "",
				categoryId: "",
				producList: []
			};
		},
		components: {
			seachBar,
			ProductListData
		},
		onLoad(options) {
			// console.log(options)
			this.categoryId = options.categoryId
			this.getProductionPage()
		},
		methods: {
			getProductionPage() {
				request(
					"/hilton/products/page",
					{
						// categoryId: this.categoryId
					},
					{
						method: "GET",
					}
				).then((res) => {
					// console.log(res)
					const {code, data} = res.data
					if(code !== 0) {
						showToast({
							title: "商品获取失败, 请重试"
						})
						return
					}
					this.producList = data.list
					for(let i = 0; i < this.producList.length; i++) {
						this.producList[i].count = 1
					}
					// console.log(code, data)
				}).catch((err) => {
					console.log(err)
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.ProductList {
		margin-top: 30rpx;
		font-family: 'PingFang SC';
		font-weight: 400;
		letter-spacing: -0.82rpx;
		color: #222222;

		.title {
			margin-left: 30rpx;
			font-size: 26rpx;
		}
	}
</style>